BEGIN {
	print "<canvas id=\"canvas\" width=\"1500\" height=\"500\"></canvas>";
	print "<script>";
	print "	 var canvasContext = document.getElementById(\"canvas\").getContext(\"2d\");"

	x = 10; 
	x_increment = 1;
	y_scale = 10;


	print "for (var y = 0; y <= 100; y += 10) {";
	print "  canvasContext.beginPath();";
	print "  canvasContext.moveTo(0, y*" y_scale ");";
	print "  canvasContext.lineTo(1500, y*" y_scale ");";
	print "  canvasContext.lineWidth = 0.5;";
	print "  canvasContext.strokeStyle = 'rgba(" r ", 0, 0, 0.2)';";
	print "  canvasContext.stroke();";
	print "}";
}

{
	num = $2;
	rec = $3;
	max = $4;
	min = $5;
	avg = $6;
	maxRec = $7;
	r = $8;
	
if (x < 1500 && rec > 0) {
	x = x + x_increment;	
	print "   canvasContext.beginPath();";
	print "   canvasContext.arc(" x ", " num * y_scale ", 2, 0, 2*Math.PI);";
	print "   canvasContext.strokeStyle = 'rgba(0, 0, 0, 1)';";
	print "   canvasContext.stroke();";

	print "   canvasContext.beginPath();";
	print "   canvasContext.arc(" x ", " rec * y_scale ", 2, 0, 2*Math.PI);";
	print "   canvasContext.strokeStyle = 'rgba(255, 0, 0, 1)';";
	print "   canvasContext.stroke();";

	print "   canvasContext.beginPath();";
	print "   canvasContext.arc(" x ", " avg * y_scale ", 1, 0, 2*Math.PI);";
	print "   canvasContext.strokeStyle = 'rgba(0, 0, 255, 1)';";
	print "   canvasContext.stroke();";

}
}

END {
	print "</script>";
}